<template>
	<div class="sun-main-box">
		<!-- 
			data:
				[
					{id:1,name:"jack"},
					{id:2,name:"mary"}
				]
			el-table:	表格
				data:	表格的数据
				border:	边框
				style:	样式
			el-table-column 		表格的列
				prop:				列对应值在data中的名称(id,name)
				label:				列的名字
				width:				列宽
		 -->
		 <!-- 搜索部分 -->
		 <div class="sun-search-box">
			 <div class="sun-search-title">
				 <div>
					 <i class="iconfont el-icon-search"></i>
					 <span>{{$store.state.username='小雨润如酥'}}筛选搜索</span>
				 </div>
				 <div>
					 <el-button size="mini">重置</el-button>
					 <el-button size="mini" type="primary" @click="getProductList">查询结果</el-button>
				 </div>
			 </div>
			 <el-form  :inline="true" :model="product" class="demo-form-inline">
			   <el-form-item label="输入搜索:">
				 <el-input size="medium" v-model="product.keyword" placeholder="商品名称"></el-input>
			   </el-form-item>
			   <el-form-item label="商品货号:">
				 <el-input size="medium" v-model="product.productSn" placeholder="商品货号"></el-input>
			   </el-form-item>
			   <el-form-item label="商品分类:">
				 <!-- <el-input size="medium" v-model="product.productCategoryId" placeholder="请选择"></el-input> -->
				 <el-cascader size="medium"  @change="handleChange" :options="cateList" :props="{label:'name',value:'id'}" clearable></el-cascader>
			   </el-form-item>
			   <el-form-item label="商品品牌:">
				 <el-select  size="medium"  v-model="product.brandId" clearable placeholder="请选择">
					 <el-option
						v-for="item in brandList"
						:label="item.name"
						:key="item.id"
						:value="item.id"
					 ></el-option>
				 </el-select>
			   </el-form-item>
			   <el-form-item label="上架状态:">
				<el-select  size="medium"  v-model="product.publishStatus" clearable placeholder="请选择">
									 <el-option
										v-for="item in publishStatusList"
										:label="item.name"
										:key="item.id"
										:value="item.id"
									 ></el-option>
				</el-select>
			   </el-form-item>
			   
			   <el-form-item label="审核状态:">
				 <el-select  size="medium"  v-model="product.verifyStatus" clearable placeholder="请选择">
				 					 <el-option
				 						v-for="item in verifyStatusList"
				 						:label="item.name"
				 						:key="item.id"
				 						:value="item.id"
				 					 ></el-option>
				 </el-select>
			   </el-form-item>
			  
			  <!-- <el-form-item>
				 <el-button type="primary" @click="onSubmit">查询</el-button>
			   </el-form-item> -->
			 </el-form>
		 </div>
		
		<!-- 数据表格显示区域 -->
		<el-table
			:data="tableData"
			border
			@selection-change="handleSelectionChange"
		>
		<el-table-column
			prop="id"
			width="80"
			type="selection"
			align="center"
			label="编号">
		</el-table-column>
			<el-table-column
				prop="id"
				width="80"
				align="center"
				label="编号">
			</el-table-column>
			<el-table-column
				prop="pic"
				width="120"
				align="center"
				label="商品图片">
				<template v-slot="vs">
					<img :src="vs.row.pic" width="80" height="80"/>
				</template>
			</el-table-column>
			
			<el-table-column
				prop="name"
				align="center"
				label="商品名称">
			</el-table-column>
			<el-table-column
				prop="name"
				align="center"
				label="价格/货号">
				<template v-slot="vs">
					<p>价格：{{vs.row.price}}</p>
					<p>货号：{{vs.row.productSn}}</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="name"
				align="center"
				label="标签">
				<template v-slot="vs">
					<p>上架：
					<!-- 
						el-switch 			表示开关
							v-model 		开关绑定的值
							active-color 	激活的颜色
							inactive-color 	关闭的颜色
							active-value 	比如v-model值为3，active-value值也为3，开关打开
							inactive-value   关闭开关，v-model的值为2，反正不能是3
					 -->
						<el-switch
							v-model="vs.row.publishStatus"
							active-color="#13ce66"
							inactive-color="#ff4949"
							:active-value="1"
							:inactive-value="0"
							@change="handlePublishChange(vs.row.publishStatus,vs.row.id)"
						></el-switch>
					</p>
					<p>新品：
						<el-switch
							v-model="vs.row.newStatus"
							active-color="#13ce66"
							inactive-color="#ff4949"
							:active-value="1"
							:inactive-value="0"
							@change="handleNewChange(vs.row.newStatus,vs.row.id)"
						></el-switch>
					</p>
					<p>推荐：
						<el-switch
							v-model="vs.row.recommandStatus"
							active-color="#13ce66"
							inactive-color="#ff4949"
							:active-value="0"
							:inactive-value="1"
						></el-switch>
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="sort"
				width="80"
				align="center"
				label="排序">
			</el-table-column>
			<el-table-column
				prop="name"
				width="120"
				align="center"
				label="SKU库存">
				<template v-slot="vs">
					<el-button @click="showSkuEdit(vs.row.id)" type="primary" icon="el-icon-edit" circle></el-button>
				</template>
			</el-table-column>
			<el-table-column
				prop="sale"
				width="80"
				align="center"
				label="销量">
			</el-table-column>
			<el-table-column
				prop="name"
				align="center"
				label="审核状态">
				<template>
					<p>未审核</p>
					<p><a href="#" style="text-decoration: none;">审核状态</a></p>
				</template>
			</el-table-column>
			<el-table-column
				prop="name"
				align="center"
				width="180"
				label="操作">
				<template v-slot="vs">
					<p>
						 <el-button size="mini">查看</el-button>
						  <el-button size="mini" @click="handlerEdit(vs.row.id)">编辑</el-button>
					</p>
					<p>
						 <el-button size="mini">日志</el-button>
						  <el-button size="mini" type="danger">删除</el-button>	
					</p>
				</template>
			</el-table-column>
		</el-table>
		<el-row style="margin:30px 0px">
			<el-col :span="8">
				<el-select size="medium" 
				v-model="batchUpdateValue"
				>
					<el-option 
					v-for="item in batchUpdateMenu" 
					:label="item.label"
					:key="item.label"
					:value="item.type+','+item.status"
					></el-option>
				</el-select>
				<el-button size="medium" @click="batchUpdate" type="primary">确定</el-button>
			</el-col>
			<el-col :span="16" align="right">
				<!-- total, sizes, prev, pager, next, jumper -->
				<el-pagination
					 @size-change="handleSizeChange"				
					 @current-change="handleCurrentChange"
					 :current-page="product.pageNum"
					  :page-sizes="[2, 3, 5, 10]"
					  :page-size="product.pageSize"
					  layout="total,sizes,prev,pager, next,jumper"
					  :total="total"
				></el-pagination>
			</el-col>
		</el-row>
		
		<el-dialog
		  title="编辑货品信息"
		  :visible.sync="skuDialogStatus"
		  width="40%"
		  >
		  <div>
			  <p>
				  <span>商品货号：6946605</span>
				  <el-input  size="mini" placeholder="请输入内容" v-model="input3" class=" searchinp input-with-select">
				   <el-button  size="mini" slot="append" icon="el-icon-search"></el-button>
			 </el-input>
			  </p>
			  <el-table 
			  class="skuTable"
			  border
				:data="skuData"
			  >
				  <el-table-column
					label="SKU编号"
					prop="skuCode"
				  ></el-table-column>
				  
				  <template v-if="skuData.length>0 && skuData[0].spData.length>0">
					  <template v-for="(v,index) in skuData[0].spData">
						  <el-table-column 
						  width="80"
								:label="v.key"
						  >
							<template v-slot="vs">
								{{vs.row.spData[index].value}} 
							</template>
						  </el-table-column>
					  </template>
				  </template>
				  
				  <el-table-column
				  					label="销售价格"
				  					prop="price"
									width="120"
				  >
				  <template v-slot="vs">
					<el-input v-model="vs.row.price"></el-input>
					</template>
				  </el-table-column>
				  <el-table-column
				  width="100"
				  					label="商品库存"
				  					prop="stock"
				  >
					<template v-slot="vs">
										<el-input v-model="vs.row.stock"></el-input>
										</template>
				  </el-table-column>
				  <el-table-column
				  					label="库存预警值"
				  					prop="lowStock"
				  >
					<template v-slot="vs">
										<el-input size="medium" v-model="vs.row.lowStock"></el-input>
										</template>
				  </el-table-column>
			  </el-table>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="skuDialogStatus = false">取 消</el-button>
		    <el-button type="primary" @click="handlerSkuEdit">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	//引入api
	import {getAllProduct,getSkuDataByPid,updatePublishStatus,updateNewStatus} from '@/api/product.js'
	import {updateSkuStock} from '@/api/sku.js'
	
	export default{
		data(){
			return{
				pid:'',
				ids:[],
				batchUpdateValue:'',
				batchUpdateMenu:[
					{label:"商品上架",type:'publish',status:1},
					{label:"商品下架",type:'publish',status:0},
					{label:"设为推荐",type:'recommend',status:1},
					{label:"取消推荐",type:'recommend',status:0},
					{label:"设为新品",type:'new',status:1},
					{label:"取消新品",type:'new',status:0}
				],
				multipleSelection:[],
				skuData:[],
				input3:'',
				skuDialogStatus:false,
				publishStatusList:[
					{id:1,name:"上架"},
					{id:0,name:"下架"}
				],
				verifyStatusList:[
					{id:1,name:"已审核"},
					{id:0,name:"未审核"}
				],
				total:0,
				tableData:[],
				product: {
				  keyword: '',				//输入搜索
				  productSn: '',			//商品货号
				  brandId:'',				//商品品牌
				  productCategoryId: '',   	//商品分类
				  publishStatus: ''	,		//上架状态
				  verifyStatus: ''			,//审核状态
				  pageSize:5,				//页大小  默认是5
				  pageNum:1					//页码    默认是1
				}
			}
		},
		mounted() {
			
			//发送请求，获取数据--获取商品列表，只是没有参数
			this.getProductList()
			this.getCateList();
			//发送请求，获取品牌列表
			this.getBrandList();
		},
		// 
		methods:{
			// 确认按钮
			handlerSkuEdit(){
				//弹框提示
				this.$confirm('是否确认修改',"确认框",{
					confirmButtonText: '确定',
				    cancelButtonText: '取消',
				    type: 'warning'
				}).then(()=>{
					//发请求
					let sd2 = JSON.parse(JSON.stringify(this.skuData));
					sd2.forEach(item=>{
						item.spData = JSON.stringify(item.spData);  //这里的修改和skuData无关
					})
				
					updateSkuStock(this.pid,sd2)
					.then(resp=>{
						console.log("resp",resp);
						this.skuDialogStatus = false;
					})
				})
				
			},
			handlerEdit(id){
				//跳到修改页面去 ,把id传过去
				this.$router.push({path:"/pms/productadd",query:{id:id}});
			},
			batchUpdate(){
				//根据输入框选中的内容来确定，结合复选框的值
				//比如下拉框选中的内容是商品上架，获取所有勾选的商品的id
				this.batchUpdateValue = this.batchUpdateValue.split(",");
				//发送请求
				let params = {};
				params.ids = this.ids.join(",");
				if(this.batchUpdateValue[0] == "publish"){
					//添加一个ids属性
					//添加一个publishStatus属性
					params.publishStatus=this.batchUpdateValue[1];
					this.batchUpdateValue = '';
					updatePublishStatus(params)
					.then((data)=>{
						console.log(data);
						this.getProductList();
					})
				}else if(this.batchUpdateValue[0] == "recommend"){
					//添加一个ids属性
					//添加一个recommendStatus属性
					
				}else if(this.batchUpdateValue[0] == "new"){
					//添加一个ids属性
					//添加一个newStatus属性
					params.newStatus=this.batchUpdateValue[1];
					this.batchUpdateValue = '';
					updateNewStatus(params)
					.then((data)=>{
						console.log(data);
						this.getProductList();
					})
					
				}
				
				
			},
			 handleSelectionChange(val) {
				 this.ids = [];
				 val.forEach(item=>{
					 this.ids.push(item.id);
				 })
				 console.log("hello hello hello hello",this.ids);
			  },
			handleNewChange(news,id){
				//发送请求
				let params = {
					ids:id,
					newStatus:news
				}
				updateNewStatus(params)
				.then((data)=>{
					console.log("data",data);
				})
			},
			handlePublishChange(news,id){
				//发送请求
				let params = {
					ids:id,
					publishStatus:news
				}
				updatePublishStatus(params)
				.then((data)=>{
					console.log("data",data);
				})
			},
			// 点击编辑按钮
			showSkuEdit(pid){
				this.skuDialogStatus = true;
				this.pid = pid;
				
				getSkuDataByPid(pid)
				.then((data)=>{
					this.skuData = data.data;
					this.skuData.forEach(item=>{
						item.spData =JSON.parse(item.spData);
					})
					console.log("this.skuData",this.skuData)
				})
			},
			 handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.product.pageSize = val;
				this.getProductList();
			  },
			  handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.product.pageNum = val;
				this.getProductList();
			  },
			getProductList(){
				getAllProduct(this.product)
				.then((data)=>{
					this.total = data.data.total;
					this.tableData = data.data.list;
				})
			},
			onSubmit() {
			  console.log('submit!');
			},
			 handleChange(value) {
				if(value){
					this.product.productCategoryId = value[1];
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.sun-main-box{
		.el-dialog{
			.searchinp{
					width:50%;
					margin-left:20px;
			}
			// .el-input{
			// 	width:50%;
			// 	margin-left:20px;
			// }
		}
		.sun-search-box{
				border:1px solid #ccc;
				margin-bottom:20px;margin-top:20px;
			.sun-search-title{
				border-bottom:1px solid #ccc;
				line-height: 40px;
				height:40px;
				padding-left:20px;
				padding-right:50px;
				display:flex;
				justify-content: space-between;//flex布局
			}
			.demo-form-inline{
					padding-top:20px;
					padding-left:50px;
					
					.el-form-item{
						margin-right:50px;
					}
			}
		}	
	}
</style>
